<script setup lang="ts">

import type { TabsPaneContext } from 'element-plus'
import { useRouter } from 'vue-router';
import {TeacherStore} from '@/stores/qianTaiPu/teacherDetailData'
import { initCustomFormatter, onMounted } from 'vue';
// 获取ID引入的
import {useRoute} from 'vue-router';
// 引入Morebutton 中的 MoreStore
import { MoreStore } from '@/stores/qianTaiPu/MoreButton';
// 引入PAI
import {CollectionCourse} from '@/api/Pu/qianTaiPu'
const router=useRouter()
const store=TeacherStore()
// 合集课程
const ClassStore=MoreStore()
//获取ID
const route=useRoute() 


//页面进来时，数据初加载
onMounted(()=>{
   init()
})
//初始化数据
const init=()=>{
   CollectionCourse(route.query.id).then((resp)=>{
   // CollectionCourse(1).then((resp)=>{
   ClassStore.arrClass=resp.data.data;

   })
   
   

}

// 更多
const MORE=()=>{
console.log(router);
  router.push('/TeachersDetail/MoreButton')
}
</script>
<template>

  <!-- 个人简介 -->
  <div class="jieShao" >
      <h3 style="margin-top: 10px;margin-left: -190px;">个人简介：</h3>
        <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ store.TeacherData[0].introduce}}</span>
         </div>

<!-- 合集课程 -->

       <!--文字 -->
       <div class="AllClass">
         <div class="Notext">
         <h3 style="color: black;">Ta的合集课程</h3>
         <el-button  round @click="MORE" class="More">更多</el-button>
      </div>
      <!-- 视频栏 -->
      <template v-for="(item,index) in ClassStore.arrClass">
      <div class="RightShipin" v-if="index < 2">
         <div class="demo-image">
         <el-image style="width: 280px; height: 150px" :src="item.thematicImg" fit="cotain" />
         <div class="blankDiv">
           <p class="NUM">6</p> 
            <span class="iconfont icon-navicon-jkhd span1"></span>
           <p class="buttom"><span class="iconfont icon-navicon-jkhd"></span></p>
         </div>

         </div>
         <div class="text">
         <span>{{item.thematicName}}</span>
         <span class="Date">12-06</span>
      </div>

      </div>
   </template>
         </div>
   
</template>
<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.AllClass{
   margin-top: 30px;
   height: 800px;
   border: 1px solid black;
}

/* 视频合集 */
.Notext{
   display: flex;
   height:40px;
   /* line-height: 40px; */
   align-items: center;
   margin-top: 10px;
   margin-left: 10px;

}
.More{
  margin-left: 110px;
  margin-top: 5px;
}
.Date{
   /* display: inline-block; */
   margin-left: 130px;
   font-size: 13px;
}
.text{
   margin-left: 12px;
}
.demo-image{
   padding: 10px;
}
a{
   text-decoration: none ;
}
.RightShipin{
   width: 280px;
   height: 150px;
   position: relative;
   left: 20px;
   margin: 10px 0px 40px -10px;
}
.blankDiv{
   width: 100px;
   height: 150px;
   position: absolute;
   top: 0;
   right: 0;
   background-color: rgba(0, 0, 0, 0.5);
}
.NUM{
font-size: 20px;
color: white;
text-align: center;
margin-top: 40px;
}
.span1{
font-size: 25px;
color: white;
display: block;
}
.buttom >span{
   position: relative;
   top: 25px;
   font-size: 25px;
   left: 30px;
   color: white;
}
.demo-image{
   padding: 0 !important;
}
/* 个人介绍 */
.jieShao{
   border: 1px solid black;
   margin-bottom: 10px;
 height: 150px;
 width: 99%;
}
.jieShao span{
  display: flex;
  text-wrap: wrap;
  justify-content: flex-start;
}
</style>